<template>
  <div class="mt-4">
    <el-input
      v-model="search"
      placeholder="请输入内容"
      class="input-with-select"
      style="width: 600px"
    >
      <template #append>
        <el-button>搜索</el-button>
      </template>
    </el-input>
    &nbsp;
    <el-button type="primary" @click="addPage">添加电影 </el-button>
  </div>
  <!-- 添加或删除 -->
  <el-table
    border
    :data="filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)"
    style="width: 100%"
  >
    <el-table-column width="100" :show-overflow-tooltip="true" label="影院ID" prop="id">
    </el-table-column>
    <el-table-column label="影院名" prop="name"> </el-table-column>
    <el-table-column label="联系电话" prop="date"> </el-table-column>
    <el-table-column label="详细地址" prop="address"> </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页器 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </div>

  <Ul @getlist="getlist"></Ul>
  <AD @getlist="getlist"></AD>
</template>

<script setup lang="ts">
// 引用useStore
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  computed, onMounted, onUnmounted, ref,
} from 'vue';
import link from '@/api/link';
import AD from '../components/addCinema.vue';
import Ul from '../components/updateCinema.vue';
// 得到store对象
const store = useStore();

const search = ref('');

// 分页实现//显示页数
const currentPage4 = ref(1);
// 最多显示几条
const pageSize4 = ref(10);
const handleSizeChange = (val: any) => {
  pageSize4.value = val;
};
const handleCurrentChange = (val: any) => {
  currentPage4.value = val;
};

// 动态渲染数据
const userList = ref([]);
onMounted(() => {
  getlist();
});
// filter过滤
// toLowerCase把字符串转换小写
// includes(search.value.toLowerCase())查找字符串是否包含search.value.toLowerCase()
const filterTableData = computed(() => userList.value.filter(
  (data: any) => !search.value
      || data.goodsName.toLowerCase().includes(search.value.toLowerCase())
      || data.price.toLowerCase().includes(search.value.toLowerCase()),
));
const getlist = () => {
  link('/cinema').then((res: any) => {
    console.log(res);

    userList.value = res.data;
    // console.log("nn",userList.value );

    // console.log("666", userList.value);
  });
};
// 添加
const addPage = (row: any) => {
  store.commit('SET_NAV');
  store.commit('Date', row);
};

// 编辑信息
const handleEdit = (index: number, row: any) => {
  // console.log(index,row)
  // 调用vuex修改
  store.commit('SET_DIALOG');
  store.commit('List', row);
};

// 删除信息
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定删除该用户吗?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      link(`/cinema/${row.id}`, 'delete').then((res: any) => {
        console.log(res);
        if (res.status === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功！',
          });
          getlist();
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败！',
          });
        }
      });
      getlist();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      });
    });
};
</script>

<style scoped>
.mt-4 {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 20px;
}
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
</style>
